<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <title>
        小区管控灯
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/css/main.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/bootstrap/css/bootstrap.css}"
          href="${pageContext.request.contextPath }/statics/lib/bootstrap/css/bootstrap.css"
          media="all">
</head>
<style>
    .highcharts-figure, .highcharts-data-table table {
        min-width: 320px;
        max-width: 800px;
        margin: 1em auto;
    }

    #container {
        height: 400px;
    }

    .highcharts-data-table table {
        font-family: Verdana, sans-serif;
        border-collapse: collapse;
        border: 1px solid #EBEBEB;
        margin: 10px auto;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }

    .highcharts-data-table caption {
        padding: 1em 0;
        font-size: 1.2em;
        color: #555;
    }

    .highcharts-data-table th {
        font-weight: 600;
        padding: 0.5em;
    }

    .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
        padding: 0.5em;
    }

    .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
        background: #f8f8f8;
    }

    .highcharts-data-table tr:hover {
        background: #f1f7ff;
    }

    body {
        text-align: center
    }

    #div5 {
        margin-left: 310px
    }
</style>
<body>
<script th:src="@{https://code.highcharts.com/highcharts.js}" src="https://code.highcharts.com/highcharts.js"></script>
<script th:src="@{https://code.highcharts.com/modules/exporting.js}"
        src="https://code.highcharts.com/modules/exporting.js"></script>
<script th:src="@{https://code.highcharts.com/modules/export-data.js}"
        src="https://code.highcharts.com/modules/export-data.js"></script>
<script th:src="@{https://code.highcharts.com/modules/accessibility.js}"
        src="https://code.highcharts.com/modules/accessibility.js"></script>

<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>资产设备管理</cite></a>
              <a><cite>资产设备列表</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                                                                        style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-form-item">
        <div class="col-xs-6 col-sm-4 col-md-3" id="div5">
            <section class="panel">
                <div class="symbol bgcolor-blue"><i class="iconfont icon-tingchewei"></i></div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="光敏电阻值"><i
                            class="iconfont " data-icon=""></i>
                        <h1 id="show">150</h1>
                    </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="光敏电阻值"> <i
                            class="iconfont " data-icon=""></i><span>光敏电阻值</span></a>
                </div>
            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-commred"><i class="iconfont icon-yezhuxian"></i></div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="当前温度"><i
                            class="iconfont " data-icon=""></i>
                        <h1 id="show2">20.4</h1>
                    </a>

                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="当前温度"> <i
                            class="iconfont " data-icon=""></i><span>当前温度</span></a>
                </div>
            </section>
        </div>
    </div>

    <!--    <div>
            <button class="layui-btn layui-btn-danger" onclick="updateClose()">
                <i class="layui-icon">&#xe69c; </i>关
            </button>
            <button class="layui-btn" onclick="updateDevcode()">
                <i class="layui-icon layui-anim layui-anim-scaleSpring">&#xe6af; </i>开
            </button>
            <button class="layui-btn" onclick="getinfo00()">
                <i class="layui-icon"></i>获取用户设备
            </button>
            <button class="layui-btn" onclick="getinfo()">
                <i class="layui-icon"></i>获取设备点
            </button>
            <button class="layui-btn" onclick="getinfo2()">
                <i class="layui-icon"></i>获取设备点2
            </button>
        </div>-->


    <figure class="highcharts-figure">
        <div id="container"></div>
        <p class="highcharts-description" align="center">
            时间
        </p>
    </figure>
</div>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/x-layui.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery-1.8.3.js}" charset="UTF-8"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<script>
    //加载layui
    layui.use(['laydate', 'element', 'laypage', 'layer'], function () {
        $ = layui.jquery;//jquery
        laydate = layui.laydate;//日期插件
        lement = layui.element();//面包导航
        // laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层
        // okLoading.close($);
        //以上模块根据需要引入

    });


</script>

<script>
    var val1;
    var val3;
    var val4;
    var wendu;
    var wendu2;

    function Iotlist_load() {
        setInterval(getinfo, 1000);
        setInterval(getinfo2, 1000);
    }

    Iotlist_load();

    function updateDevcode() {
        //开
        $.post("http://Post.iot.o8y.net/Api1.0/ProJsPost.ashx", {
            Type: "Post_Stream",
            OpenName: "25Gs1l5tP0zq2SgGLBXEi1XIe$EBo5wvJ9XtnNg$eQK26NqRgbeYIHttRin9k/XJ",
            Devcode: "OotVYrquKILcCnnxIIOci0Uewr68LiA0YPh23JgB6AGCFvDeAIEdcmBQyp41mJpS42fC1Bka8q8zsmsknXejyA==",
            DataItem: '[{"Item": "IO02", "Value": "IO02=0"}]'
        }, function (data) {
            console.info(data)
        });
    }

    function updateClose() {
        //关
        $.post("http://Post.iot.o8y.net/Api1.0/ProJsPost.ashx", {
            Type: "Post_Stream",
            OpenName: "25Gs1l5tP0zq2SgGLBXEi1XIe$EBo5wvJ9XtnNg$eQK26NqRgbeYIHttRin9k/XJ",
            Devcode: "OotVYrquKILcCnnxIIOci0Uewr68LiA0YPh23JgB6AGCFvDeAIEdcmBQyp41mJpS42fC1Bka8q8zsmsknXejyA==",
            DataItem: '[{"Item": "IO02", "Value": "IO02=1"}]'
        }, function (data) {
            console.info(data)
        });
    }

    function getinfo() {
        $.get("http://Get.iot.o8y.net/Api1.0/ProJsGet.ashx", {
            Type: "Get_Stream",
            OpenName: "25Gs1l5tP0zq2SgGLBXEi1XIe$EBo5wvJ9XtnNg$eQK26NqRgbeYIHttRin9k/XJ",
            Devcode: "OotVYrquKILcCnnxIIOci0Uewr68LiA0YPh23JgB6AGCFvDeAIEdcmBQyp41mJpS42fC1Bka8q8zsmsknXejyA==",
            item: ""
        }, function (data) {
            console.info(data)
            val1 = data.data.datastreams[1].datapoints[0].value
            $("#show").text(val1)
            val4 = data.data.datastreams[3].datapoints[0].value.toString()
            var words = val4.split("=");
            addlog(words[1])
        }, "json");
    }

    function getinfo2() {
        $.get("http://Get.iot.o8y.net/Api1.0/ProJsGet.ashx", {
            Type: "Get_Stream",
            OpenName: "25Gs1l5tP0zq2SgGLBXEi1XIe$EBo5wvJ9XtnNg$eQK26NqRgbeYIHttRin9k/XJ",
            Devcode: "Q6a8QmeJ$fY2DtIxPfp0X1J26cl3jXwZaRb/Yq79roYb38IedEJ99sbB4si88zZOdCa3OfKwxLcwNcfUhxoVyg==",
            item: ""
        }, function (data) {
            console.info(data)
            console.info(data.data.datastreams[3].datapoints[0].value)
            wendu = data.data.datastreams[3].datapoints[0].value.toString();
            if (wendu.length == 4) {
                wendu2 = wendu.substring(0, 2) + "." + wendu.substring(2, 4)
            }
            $("#show2").text(wendu2 + "℃")
        }, "json")
    }

    function getinfo00() {
        $.get("http://Get.iot.o8y.net/Api1.0/ProJsGet.ashx", {
                Type: "Get_Device",
                OpenName: "25Gs1l5tP0zq2SgGLBXEi1XIe$EBo5wvJ9XtnNg$eQK26NqRgbeYIHttRin9k/XJ",
                User_OpenID: "Db9vafegl8N9IxRPYNNk99u2cRlx71iFBAnJtEVYWCJfm7Ja9gVmICPUlEOgdveS",
                Devcode: ""
            },
            function (data) {
                console.info("M3------")
                console.info(data)
            }, "json");
    }

    function addlog(words) {
        var lampState;
        var flag;

        $.ajax({
            type: "GET",
            url: "/lampLog/list",
            data: {size: 1},
            async: false,
            dataType: "json",
            success: function (data) {
                lampState = data.data.records[0].lampState;

                console.info(words + "当前开关****对比****最后一条" + lampState)
                console.info(words == lampState)
                flag = words == lampState
            }
        })
        console.info("!flag-----" + !flag)
        if (!flag) {
            console.info(words + "----words-----" + !flag)
            //增加一条开启记录
            $.ajax({
                type: "post",
                url: "/lampLog/add",
                data: {lampState: words, lampName: '小区路灯'},
                dataType: "json",
                success: function (data) {
                    console.info("添加了一条工作记录")
                    console.info(data)
                }
            })
        }
        else {

            //增加一条关闭记录
        }
    }
</script>
<script>    //实时折线图
console.log(document.querySelectorAll("script"))
Highcharts.chart('container', {
    chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function () {
                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var aa = $("#show").text()
                    console.log("val:" + $("#show").text())
                    var x = (new Date()).getTime(), // current time
                        y = Math.ceil(Math.random()) * aa;
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },

    time: {
        useUTC: false
    },

    title: {
        text: '光敏电阻值折线图'
    },

    accessibility: {
        announceNewData: {
            enabled: true,
            minAnnounceInterval: 15000,
            announcementFormatter: function (allSeries, newSeries, newPoint) {
                if (newPoint) {
                    return 'New point added. Value: ' + newPoint.y;
                }
                return false;
            }
        }
    },

    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },

    yAxis: {
        title: {
            text: '光敏电阻值'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },

    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
    },

    legend: {
        enabled: false
    },

    exporting: {
        enabled: false
    },

    series: [{
        name: '时间和电阻值',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random()
                });
            }
            return data;
        }())
    }]
});
</script>
</body>
</html>